<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                </el-breadcrumb-item>
            </el-breadcrumb> -->
            <!-- <div class="indexTitle">项目管理</div> -->
            <div class="contentbox">
                <div class="contentsize">楼幢信息编辑</div>
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">取消</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- <div class="addtitle">新建</div> -->
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="区属名称:" style="width: 30%" prop="qs">
                    <el-select v-model="form.qs" placeholder="请选择区属名称" clearable style="width: 100%">
                        <el-option v-for="item in qslist" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房屋地址:" style="width: 30%" prop="fwdz">
                    <el-input v-model="form.fwdz" placeholder="请输入房屋地址" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="楼号:" style="width: 30%" prop="lh">
                    <el-input v-model="form.lh" placeholder="请输入楼号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="房屋结构:" style="width: 30%" prop="fwjg">
                    <el-select v-model="form.fwjg" placeholder="请选择房屋结构" clearable style="width: 100%">
                        <el-option v-for="item in fwjglist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="建筑年代:" style="width: 30%" prop="jznd">
                    <el-input v-model="form.jznd" placeholder="请输入建筑年代" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="产别:" style="width: 30%" prop="cb">
                    <el-select v-model="form.cb" placeholder="请选择产别类型" clearable style="width: 100%">
                        <el-option v-for="item in cblist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.cb" placeholder="请输入产别" class="search-input"></el-input> -->
                </el-form-item>
                <el-form-item label="权证类型:" style="width: 30%" prop="qzlx">
                    <!-- <el-select v-model="form.qzlx" placeholder="请选择权证类型" clearable style="width: 100%">
                        <el-option v-for="item in qzlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="form.qzlx" placeholder="请输入权证类型" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积:" style="width: 30%" prop="jzmj">
                    <el-input v-model="form.jzmj" placeholder="请输入建筑面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="房屋性质:" style="width: 30%" prop="fwyt">
                    <el-select v-model="form.fwyt" placeholder="请选择房屋性质" clearable style="width: 100%">
                        <el-option v-for="item in fwytlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                    <!-- <el-input v-model="form.fwyt" placeholder="请输入房屋性质" class="search-input"></el-input> -->
                </el-form-item>
                <el-form-item label="证书编号:" style="width: 30%" prop="zsbh">
                    <el-input v-model="form.zsbh" placeholder="请输入证书编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="计租面积:" style="width: 30%" prop="jzmj">
                    <el-input v-model="form.jizumj" placeholder="请输入计租面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="产权单位:" style="width: 30%" prop="cqdw">
                    <!-- <el-input v-model="form.cqdw" placeholder="请输入产权单位" class="search-input"></el-input> -->
                    <el-select v-model="form.cqdw" placeholder="请选择房屋性质" clearable style="width: 100%">
                        <el-option v-for="item in cqdwlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发证日期:" style="width: 30%" prop="fzrq">
                    <el-date-picker type="date" placeholder="选择发证日期" v-model="form.fzrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="土地使用权面积:" style="width: 30%" prop="tdsyqmj">
                    <el-input v-model="form.tdsyqmj" placeholder="请输入土地使用权面积" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="总楼层:" style="width: 30%" prop="zlc">
                    <el-input v-model="form.zlc" placeholder="请输入总楼层" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="地上层数:" style="width: 30%" prop="dscs">
                    <el-input v-model="form.dscs" placeholder="请输入地上层数" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="土地使用权类型:" style="width: 30%" prop="tdsyqlx">
                    <!-- <el-select v-model="form.tdsyqlx" placeholder="请选择土地使用权类型" clearable style="width: 100%">
                        <el-option v-for="item in tdsyqlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="form.tdsyqlx" placeholder="请输入土地使用权类型" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="风貌建筑:" style="width: 30%" prop="fmjz">
                    <el-select v-model="form.fmjz" placeholder="请选择是否为风貌建筑" clearable style="width: 100%">
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小洋楼招商:" style="width: 30%" prop="zsxyl">
                    <el-select v-model="form.zsxyl" placeholder="请选择是否为小洋楼招商" clearable style="width: 100%">
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地下层数:" style="width: 30%" prop="dxcs">
                    <el-input v-model="form.dxcs" placeholder="请输入地下层数" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="原值:" style="width: 30%" prop="yz">
                    <el-input v-model="form.yz" placeholder="请输入原值" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="建档日期:" style="width: 30%" prop="jdrq">
                    <el-date-picker type="date" placeholder="选择建档日期" v-model="form.jdrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="建筑形式:" style="width: 30%" prop="jzxs">
                    <el-select v-model="form.jzxs" placeholder="请选择建筑形式" clearable style="width: 100%">
                        <el-option v-for="item in jzxslist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="档案编号:" style="width: 30%" prop="dabh">
                    <el-input v-model="form.dabh" placeholder="请输入档案编号" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="备注:" style="width: 100%" prop="note">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.note">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
                <div style="display: flex; margin-top: 20px">
                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                        v-for="(item, index) in fromlist" :key="index" class="filebox">
                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                            @click="downloadfile(item.id, item.name, item.suffix)" />
                        <div class="fileboxitem">{{ item.name }}</div>
                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index)"></div>
                    </div>
                </div>
                <!-- <div class="buttonCenter">
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">取消</el-button>
                </div> -->
            </el-form>
        </div>
    </div>
</template>
<script>
import { builddetail, download, buildedit } from '@/api/index';
import fileType from "../vo/filetype";
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'editlz',
    data() {
        return {
            httpUrl: global.httpUrl,//公共地址
            qslist:valueList.qsList,//区属
            cqdwlist:valueList.cqdwlist,//产权单位
            fwytlist: valueList.fwytlist,//房屋性质
            cblist: valueList.cblist,//产别
            qzlxlist:valueList.qzlxlist,//权证类型
            tdsyqlxlist: valueList.tdsyqlxlist,//土地使用权类型
            sflist: valueList.sflist,//是否列表
            jzxslist: valueList.jzxslist,//建筑形式列表
            fwjglist: valueList.fwjglist,//房屋结构列表
            gfdwlist: valueList.gfdwlist,//管房单位
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                
            },
            fileList: [],
            fromlist: [],
            fj: '',
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            }
        };
    },
    methods: {
        // 编辑
        submitForm() {
            var that = this
            if (this.fromlist) {
                if (this.fromlist.length != 0) {
                    let a = this.fromlist.map(res => {
                        return res.id;
                    })
                    console.log(a)
                    if (that.fj) {
                        that.form.fj = a.toString() + ',' + that.fj
                    } else {
                        that.form.fj = a.toString()
                    }
                }
            }else{
                that.form.fj = that.fj
            }
            this.form.gfdw=this.$store.getters.gfdw
            buildedit(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.$router.push({
                        name: 'dashboard',
                        path: '/dashboard'
                    });
                } else {
                    this.$message.error('修改失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.fj = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.fj = this.fileListshandle.toString()
        },
        // 删除已有文件
        deletefile(index) {
            this.$confirm('确定删该文件吗？')
                .then(() => {
                    this.fromlist.splice(index, 1)
                    this.$message.success('删除成功');
                    // console.log(this.fromlist)
                    // let lifelist = this.fromlist.map(res => {
                    //     console.log(res)
                    //     return res.id;
                    // })
                    // this.liftlistarry = lifelist.toString()
                    // console.log(this.liftlistarry)
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 项目详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.form = res.data;
                this.fromlist = res.data.fj;
                console.log(this.form.fj)
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
                // const blob = new Blob([res], {
                //     type: filetype
                // })
                // // const blob = res.data
                // const link = document.createElement('a')
                // const url = window.URL.createObjectURL(blob)
                // link.style.display = 'none'
                // link.href = url
                // link.setAttribute('download', name)
                // document.body.appendChild(link)
                // link.click()
                // document.body.removeChild(link)
            })
        }
    },
    created() {
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>